<template>
  <div>
    <h1>【aty-menu】 component demo</h1>
    <p>【aty-menu】 本质</p>
    <aty-row class="fd-menu-box">
      <aty-row v-show="true">
        <aty-title level="4">1.【aty-menu】 基础</aty-title>
        <aty-panel>水平的顶部导航菜单。 <br />
          通过设置属性 theme 为 light、dark、primary 可以选择主题。 <br />
          通过事件 select 可以得到点击菜单的 name 值，从而控制页面路由或自定义操作。
        </aty-panel>
        <aty-menu mode="horizontal" :theme="theme1" :open-codes="openCodes" :active-code="currentCode" :show-sub-menu="switch1"
                  @select="select">
          <aty-menu-item code="1" text="内容管理" />
          <aty-menu-item code="2" text="用户管理" />
          <aty-submenu code="3" :text="submenu">
            <aty-menu-group text="使用">
              <aty-menu-item code="3-1" text="新增和启动" />
            </aty-menu-group>
            <aty-menu-group :text="submenu">
              <aty-menu-item code="3-4" text="用户留存" />
              <aty-menu-item code="3-5" text="流失用户" />
            </aty-menu-group>
          </aty-submenu>
          <aty-menu-item code="4" text="综合设置" />
        </aty-menu>

        <aty-title :level="5">动态激活</aty-title>
        <aty-text text="是否自动展开子菜单" />
        <aty-switch v-model="switch1" />
        <aty-input v-model="currentCode" style="width:300px">
          <aty-text slot="prepend" text="修改激活菜单" />
        </aty-input>
        <!--<aty-title :level="5">切换主题</aty-title>-->
        <!--            <aty-radio-group name="theme" :value="theme" @change="change">
                                <aty-radio name="theme" :value="theme" code="light" radioLabel="light"></aty-radio>
                                <aty-radio name="theme" :value="theme" code="dark" radioLabel="dark"></aty-radio>
                                <aty-radio name="theme" :value="theme" code="primary" radioLabel="primary"></aty-radio>
                            </aty-radio-group>-->
      </aty-row>

      <aty-row v-show="true">
        <aty-title level="4">2.【aty-menu】 侧栏导航</aty-title>
        <aty-panel>垂直导航菜单，可以内嵌子菜单。。 <br />
          设置 active-code 可以选中指定的菜单，设置 open-codes 可以展开指定的子菜单。 <br />
          设置属性 accordion 可以开启手风琴模式，每次只能展开一个子菜单。 <br />
          通过设置属性 theme 为 light、dark 可以选择主题，侧栏菜单不支持 primary 主题。
        </aty-panel>
        <aty-panel style="margin-bottom: 15px">
          <aty-title :level="5">动态激活</aty-title>
          <aty-text text="是否自动展开子菜单" />
          <aty-switch v-model="switch2" />
          <aty-input v-model="currentCode2" style="width:300px">
            <aty-text slot="prepend" text="修改激活菜单" />
          </aty-input>
        </aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-menu :theme="theme2" @select="select" :open-codes="openCodes" :active-code="currentCode2"
                      :show-sub-menu="switch2">
              <aty-submenu code="1" text="内容管理">
                <aty-menu-item code="1-1" text="文章管理" />
                <aty-menu-item code="1-2" text="评论管理" />
                <aty-menu-item code="1-3" text="举报管理" />
              </aty-submenu>
              <aty-submenu code="2" text="用户管理">
                <aty-menu-item code="2-1" text="新增用户" />
                <aty-menu-item code="2-2" text="活跃用户" />
              </aty-submenu>
              <aty-submenu code="3" :text="submenu">
                <aty-menu-group text="使用">
                  <aty-menu-item code="3-1" text="新增和启动" />
                  <aty-menu-item code="3-2" text="活跃分析" />
                  <aty-menu-item code="3-3" text="时段分析" />
                </aty-menu-group>
                <aty-menu-group text="留存">
                  <aty-menu-item code="3-4" text="用户留存" />
                  <aty-menu-item code="3-5" text="流失用户" />
                </aty-menu-group>
              </aty-submenu>
            </aty-menu>
          </aty-col>

          <aty-col span="8">
            <aty-menu :theme="theme2" active-code="1-1" :open-codes="[1,2]" @select="select">
              <aty-submenu code="1" text="内容管理">
                <aty-menu-item code="1-1" text="文章管理" @click="click" />
                <aty-menu-item code="1-2" text="评论管理" />
                <aty-menu-item code="1-3" text="举报管理" />
              </aty-submenu>
              <aty-submenu code="2" text="用户管理">
                <aty-menu-item code="2-1" text="新增用户" />
                <aty-menu-item code="2-2" text="活跃用户" />
              </aty-submenu>
              <aty-submenu code="3" :text="submenu">
                <aty-menu-group text="使用">
                  <aty-menu-item code="3-1" text="新增和启动" />
                  <aty-menu-item code="3-2" text="活跃分析" />
                  <aty-menu-item code="3-3" text="时段分析" />
                </aty-menu-group>
                <aty-menu-group text="留存">
                  <aty-menu-item code="3-4" text="用户留存" />
                  <aty-menu-item code="3-5" text="流失用户" />
                </aty-menu-group>
              </aty-submenu>
            </aty-menu>
          </aty-col>

          <aty-col span="8">
            <aty-menu :theme="theme2" accordion @select="select" :active-code="currentCode2"
                      :show-sub-menu="switch2">
              <aty-submenu code="1" text="内容管理">
                <aty-menu-item code="1-1" text="文章管理" />
                <aty-menu-item code="1-2" text="评论管理" />
                <aty-menu-item code="1-3" text="举报管理" />
              </aty-submenu>
              <aty-submenu code="2" text="用户管理">
                <aty-menu-item code="2-1" text="新增用户" />
                <aty-menu-item code="2-2" text="活跃用户" />
              </aty-submenu>
              <aty-submenu code="3" :text="submenu">
                <aty-menu-group text="使用">
                  <aty-menu-item code="3-1" text="新增和启动" />
                  <aty-menu-item code="3-2" text="活跃分析" />
                  <aty-menu-item code="3-3" text="时段分析" />
                </aty-menu-group>
                <aty-menu-group text="留存">
                  <aty-menu-item code="3-4" text="用户留存" />
                  <aty-menu-item code="3-5" text="流失用户" />
                </aty-menu-group>
              </aty-submenu>
            </aty-menu>
          </aty-col>
        </aty-row>
        <aty-title :level="5">更换主题</aty-title>
        <!-- <aty-radio-group name="themet" :value="themet" @change="change">
                     <aty-radio name="themet" :value="themet" code="light" radioLabel="light"></aty-radio>
                     <aty-radio name="themet" :value="themet" code="dark" radioLabel="dark"></aty-radio>
                 </aty-radio-group>-->
      </aty-row>

      <aty-row v-show="true">
        <aty-title level="4">3.【aty-menu】 内嵌菜单</aty-title>
        <aty-panel>垂直菜单，子菜单内嵌在菜单区域。</aty-panel>

        <aty-menu active-code="1-2" :open-codes="['1']" @select="select">
          <aty-submenu code="1" text="Navigation One">
            <aty-menu-group text="Item 1">
              <aty-submenu code="1-11">
                <aty-menu-item code="1111" text="item.name" />
              </aty-submenu>
              <aty-menu-item code="1-1" text="Option 1" />
              <aty-menu-item code="1-2" text="Option 2" />
            </aty-menu-group>
            <aty-menu-group text="Item 2">
              <aty-menu-item code="1-3" text="Option 3" />
              <aty-menu-item code="1-4" text="Option 4" />
            </aty-menu-group>
          </aty-submenu>
          <aty-submenu code="2" text="Navigation Two">
            <aty-menu-item code="2-1" text="Option 5" />
            <aty-menu-item code="2-2" text="Option 6" />
            <aty-submenu code="3" text="Navigation  Two children">
              <aty-menu-item code="3-1" text="Option 7" />
              <aty-menu-item code="3-2" text="Option 8" />
            </aty-submenu>
          </aty-submenu>
          <aty-submenu code="4" text="Navigation Three" @click="click">
            <aty-menu-item code="4-1" text="Option 9" />
            <aty-menu-item code="4-2" text="Option 10" />
            <aty-menu-item code="4-3" text="Option 11" />
            <aty-menu-item code="4-4" text="Option 12" />
          </aty-submenu>
        </aty-menu>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-menu】分组</aty-title>
        <aty-panel>使用 aty-menu-group 组件进行分组。</aty-panel>
        <aty-menu :theme="theme3" active-code="2" @select="select">
          <aty-menu-group text="内容管理">
            <aty-menu-item code="1" text="文章管理" />

            <aty-menu-item code="2" text="评论管理" />

          </aty-menu-group>
          <aty-menu-group text="统计分析" @click="click">
            <aty-menu-item code="3" text="用户留存" />
            <aty-menu-item code="4" text="流失用户" @click="click" />
          </aty-menu-group>
        </aty-menu>
        <aty-title :level="5">更换主题</aty-title>
        <!-- <aty-radio-group name="themeth" :value="themeth" @change="change">
                     <aty-radio name="themeth" :value="themeth" code="light" radioLabel="light"></aty-radio>
                     <aty-radio name="themeth" :value="themeth" code="dark" radioLabel="dark"></aty-radio>
                 </aty-radio-group>-->
      </aty-row>
      <aty-row v-show="true">
        <aty-title level="4">5.【aty-menu】 内嵌图标</aty-title>
        <aty-panel>使用 icon 嵌入图标。</aty-panel>
        <aty-menu active-code="2" @select="select">
          <aty-menu-item code="1" text="文章管理" icon="static/images/avatar.jpg" />
          <aty-submenu code="2" text="导航submenu" icon="static/images/avatar.jpg">
            <aty-menu-item code="2-1" text="Option 5" icon="static/images/avatar.jpg" />
            <aty-menu-item code="2-2" text="Option 6" icon="static/images/avatar.jpg" />
            <aty-menu-group text="导航menu-group" icon="static/images/avatar.jpg">
              <aty-menu-item code="2-3-1" text="文章管理" icon="static/images/avatar.jpg" />
              <aty-menu-item code="2-3-2" text="评论管理" icon="static/images/avatar.jpg" />
            </aty-menu-group>
          </aty-submenu>
        </aty-menu>
      </aty-row>

      <aty-row v-show="true">
        <aty-title level="4">6.【aty-menu】 异步数据实例</aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-title level="5"> 单aty-menu-item</aty-title>
            <aty-menu :active-code="2" @select="select">
              <aty-submenu code="11">
                <aty-menu-item
                  :code="item.id"
                  v-for="(item,index) in dataSync"
                  :key="index+1"
                  :text="item.name" />
              </aty-submenu>
            </aty-menu>
          </aty-col>
          <aty-col span="8">
            <aty-title level="5"> aty-menu-item 和aty-submenu 组合</aty-title>
            <aty-menu :active-code="2" :open-codes="[22,33]" @select="select">
              <aty-submenu :code="itemP.code"
                           :text="itemP.name"
                           v-for="(itemP,indexP) in dataSync2"
                           :key="indexP+2">
                <aty-menu-item :code="item.id"
                               v-for="(item,index) in itemP.children"
                               :key="index+1"
                               :text="item.name" />
              </aty-submenu>
            </aty-menu>
          </aty-col>
        </aty-row>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {

  data () {
    return {
      currentCode: '1',
      switch1: true,
      currentCode2: '1-1',
      openCodes: ['3'],
      switch2: true,
      dataSync: [
        /*
         *  {id:1,name:'asdas'},
         * {id:2,name:'44545'},
         * {id:3,name:'zxczxc'},
         *{id:4,name:'Zx'}
         */
      ],
      dataSync2: [],
      submenu: '<i class="aty-icon aty-icon-stats-bars"></i>统计分析',
      theme: { code: 'light' },
      themet: { code: 'light' },
      themeth: { code: 'light' },
      test: '<span>内容管理</span>'
    }
  },
  computed: {
    theme1 () {
      return this.theme.code
    },
    theme2 () {
      return this.themet.code
    },
    theme3 () {
      return this.themeth.code
    }
  },
  methods: {
    aaaa () {
      alert(111)
    },
    change (value, name, index) {
      console.log(value)
      this[name] = value
    },
    select (code, text) {
      console.log(code, text)
    },
    click (item, event) {
      console.log(item, event)
    }
  },

  created () {

  },
  mounted () {
    setTimeout(() => {
      this.dataSync = [
        { id: 1, name: 'asdas' },
        { id: 2, name: '44545' },
        { id: 3, name: 'zxczxc' },
        { id: 4, name: 'Zx' }
      ]
    }, 2000)

    setTimeout(() => {
      this.dataSync2 =
                [
                  {
                    code: 22,
                    name: 'qqqqqqq',
                    children: [
                      { id: 1, name: 'asdas' },
                      { id: 2, name: '44545' },
                      { id: 3, name: 'zxczxc' },
                      { id: 4, name: 'Zx' }
                    ]
                  },
                  {
                    code: 33,
                    name: 'wwwwwwwwww',
                    children: [
                      { id: 11, name: 'asda121s' },
                      { id: 21, name: '441212545' },
                      { id: 31, name: 'zxc1212zxc' },
                      { id: 41, name: 'Zx1212' }
                    ]
                  }

                ]
    }, 4000)
  }
}
</script>
<style lang="less" type="text/less">
    .fd-menu-box {
        margin: 20px;
        text-align: left;

        > .aty-row {
            margin-bottom: 20px;
        }
    }
</style>
